<div
  [ngStyle]="{ width: width + 'px' }"
  *ngIf="appendToBody"
  dDropDown
  appendToBody
  [trigger]="disabled ? 'manually' : 'click'"
  [closeScope]="'blank'"
  #mainDropdown="d-dropdown"
  (toggleEvent)="onToggle($event)"
  [showAnimation]="showAnimation"
  [appendToBodyDirections]="subMenuDirections"
  [ngClass]="{ 'dropdown-show-clear': allowClear && (showTextValue || multipleValueList.length) }"
>
  <div dDropDownToggle (focus)="showSearchInput = true" [class.devui-gray-style]="styleType === 'gray'">
    <ng-template
      [ngTemplateOutlet]="hostTemplate || default"
      [ngTemplateOutletContext]="{ value: showTextValue || multipleValueList }"
    ></ng-template>
  </div>

  <ng-template #default>
    <input
      *ngIf="!multiple"
      #outerInput
      [placeholder]="placeholder"
      type="text"
      class="devui-form-control devui-select-input devui-input"
      [ngClass]="{ 'devui-search-cascader': allowSearch }"
      [readonly]="!allowSearch"
      [disabled]="disabled"
      [ngModel]="showTextValue"
      (ngModelChange)="valueChanges($event)"
    />
    <div class="devui-tags-input-wrapper" *ngIf="multiple">
      <div class="devui-tags-input devui-scrollbar">
        <d-tag
          *ngFor="let item of multipleValueList; let index = index"
          [tag]="item.pathLabel || item.label"
          [labelStyle]="item.disabled ? 'tag-disabled' : ''"
          [deletable]="!item.disabled"
          (tagDelete)="deleteTag($event, item)"
          [maxWidth]="tagMaxWidth"
        ></d-tag>
        <input
          #innerInput
          (blur)="showSearchInput = false"
          *ngIf="allowSearch && showSearchInput"
          dTextInput
          class="inner-input"
          [placeholder]="multipleValueList.length ? '' : placeholder"
          [ngModel]="showTextValue"
          (ngModelChange)="valueChanges($event)"
        />
        <span *ngIf="!multipleValueList.length && !allowSearch" class="devui-dropdown-placeholder">{{ placeholder }}</span>
      </div>
      <div class="devui-drop-icon-wrapper">
        <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
              ></path>
            </g>
          </svg>
        </span>
        <span class="devui-cascader-close-icon" (click)="clearTags()">
          <svg
            width="12px"
            height="12px"
            viewBox="0 0 12 12"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                d="M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </span>
      </div>
    </div>
    <div class="devui-single-drop-icon-wrapper" *ngIf="!multiple">
      <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
        <svg
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
            ></path>
          </g>
        </svg>
      </span>
      <span class="devui-cascader-close-icon" (click)="clearTags()">
        <svg
          width="12px"
          height="12px"
          viewBox="0 0 12 12"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
      </span>
    </div>
  </ng-template>

  <div dDropDownMenu class="devui-drop-menu-wrapper {{ dropdownPanelClass }}">
    <ng-container *ngIf="!showSearchPanel">
      <ul
        *ngFor="let optionList of columnList; let i = index"
        class="devui-cascader-list devui-scrollbar"
        [ngClass]="{ 'devui-drop-no-data': !options.length }"
        [ngStyle]="{ width: dropdownWidth + 'px' }"
        role="menu"
        (click)="$event.stopPropagation()"
      >
        <ng-container *ngIf="dropdownHeaderTemplate">
          <ng-template [ngTemplateOutlet]="dropdownHeaderTemplate" [ngTemplateOutletContext]="{ index: i }"> </ng-template>
        </ng-container>

        <ng-container *ngIf="optionList.length">
          <d-cascader-li
            *ngFor="let option of optionList"
            [option]="option"
            [trigger]="trigger"
            [width]="dropdownWidth"
            [multiple]="multiple"
            [colIndex]="i"
            [dropDownItemTemplate]="dropDownItemTemplate"
            [isLazyLoad]="isLazyLoad"
            [canSelectParent]="canSelectParent"
            [checkboxRelation]="checkboxRelation"
          ></d-cascader-li>
        </ng-container>
        <div *ngIf="!optionList.length" class="devui-no-data-tip">{{ i18nCommonText.noData }}</div>
      </ul>
    </ng-container>

    <ng-container *ngIf="showSearchPanel">
      <ul
        class="devui-cascader-list devui-scrollbar"
        [style.minWidth]="dropdownWidth - 2 + 'px'"
        [ngClass]="{ 'devui-drop-no-data': !searchResultList.length }"
      >
        <li
          *ngFor="let item of searchResultList"
          class="devui-cascader-list-item"
          [ngClass]="{ 'active-li': item.checked }"
          (click)="chooseSearchResult(item)"
        >
          {{ item.label }}
        </li>
        <div *ngIf="!searchResultList.length" class="devui-no-data-tip">{{ i18nCommonText.noData }}</div>
      </ul>
    </ng-container>
  </div>
</div>

<div
  *ngIf="!appendToBody"
  [ngStyle]="{ width: width + 'px' }"
  dDropDown
  [trigger]="'click'"
  [closeScope]="'blank'"
  #mainDropdown="d-dropdown"
  (toggleEvent)="onToggle($event)"
  [showAnimation]="showAnimation"
>
  <div dDropDownToggle (focus)="showSearchInput = true">
    <ng-template
      [ngTemplateOutlet]="hostTemplate || default"
      [ngTemplateOutletContext]="{ value: showTextValue || multipleValueList }"
    ></ng-template>
  </div>
  <ng-template #default>
    <input
      *ngIf="!multiple"
      #outerInput
      [placeholder]="placeholder"
      type="text"
      class="devui-form-control devui-select-input devui-input"
      [ngClass]="{ 'devui-search-cascader': allowSearch }"
      [readonly]="!allowSearch"
      [disabled]="disabled"
      [ngModel]="showTextValue"
      (ngModelChange)="valueChanges($event)"
    />
    <div class="devui-tags-input-wrapper" *ngIf="multiple">
      <div class="devui-tags-input devui-scrollbar">
        <d-tag
          *ngFor="let item of multipleValueList; let index = index"
          [tag]="item.label"
          [deletable]="true"
          (tagDelete)="deleteTag($event, item)"
        ></d-tag>
        <input
          #innerInput
          (blur)="showSearchInput = false"
          *ngIf="allowSearch && showSearchInput"
          dTextInput
          class="inner-input"
          [placeholder]="multipleValueList.length ? '' : placeholder"
          [ngModel]="showTextValue"
          (ngModelChange)="valueChanges($event)"
        />
        <span *ngIf="!multipleValueList.length && !allowSearch" class="devui-dropdown-placeholder">{{ placeholder }}</span>
      </div>
      <div class="devui-drop-icon-wrapper">
        <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
              ></path>
            </g>
          </svg>
        </span>
        <span class="devui-cascader-close-icon" (click)="clearTags()">
          <svg
            width="12px"
            height="12px"
            viewBox="0 0 12 12"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <path
                d="M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </span>
      </div>
    </div>
    <div class="devui-single-drop-icon-wrapper" *ngIf="!multiple">
      <span class="devui-drop-icon" [ngClass]="{ 'devui-drop-icon-animation': showAnimation }">
        <svg
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
            ></path>
          </g>
        </svg>
      </span>
      <span class="devui-cascader-close-icon" (click)="clearTags()">
        <svg
          width="12px"
          height="12px"
          viewBox="0 0 12 12"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
      </span>
    </div>
  </ng-template>

  <div dDropDownMenu class="devui-drop-menu-wrapper {{ dropdownPanelClass }}">
    <ng-container *ngIf="!showSearchPanel">
      <ul
        *ngFor="let optionList of columnList; let i = index"
        class="devui-cascader-list devui-scrollbar"
        [ngClass]="{ 'devui-drop-no-data': !options.length }"
        [ngStyle]="{ width: dropdownWidth + 'px' }"
        role="menu"
        (click)="$event.stopPropagation()"
      >
        <ng-container *ngIf="dropdownHeaderTemplate">
          <ng-template [ngTemplateOutlet]="dropdownHeaderTemplate" [ngTemplateOutletContext]="{ index: i }"> </ng-template>
        </ng-container>

        <ng-container *ngIf="optionList.length">
          <d-cascader-li
            *ngFor="let option of optionList"
            [option]="option"
            [trigger]="trigger"
            [width]="dropdownWidth"
            [multiple]="multiple"
            [colIndex]="i"
            [dropDownItemTemplate]="dropDownItemTemplate"
            [isLazyLoad]="isLazyLoad"
            [canSelectParent]="canSelectParent"
            [checkboxRelation]="checkboxRelation"
          ></d-cascader-li>
        </ng-container>
        <div *ngIf="!optionList.length" class="devui-no-data-tip">{{ i18nCommonText.noData }}</div>
      </ul>
    </ng-container>

    <ng-container *ngIf="showSearchPanel">
      <ul
        class="devui-cascader-list devui-scrollbar"
        [style.minWidth]="dropdownWidth - 2 + 'px'"
        [ngClass]="{ 'devui-drop-no-data': !searchResultList.length }"
      >
        <li
          *ngFor="let item of searchResultList"
          class="devui-cascader-list-item"
          [ngClass]="{ 'active-li': item.checked }"
          (click)="chooseSearchResult(item)"
        >
          {{ item.label }}
        </li>
        <div *ngIf="!searchResultList.length" class="devui-no-data-tip">{{ i18nCommonText.noData }}</div>
      </ul>
    </ng-container>
  </div>
</div>
